<template>
  <div class="video-test-container">
    <h1>VideoPlayer组件测试</h1>
    
    <div class="test-section">
      <h2>测试1: 本地视频文件</h2>
      <VideoPlayer
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        :width="640"
        :height="360"
        :autoplay="false"
        :muted="true"
        @ready="onPlayerReady"
        @error="onPlayerError"
      />
    </div>
    
    <div class="test-section">
      <h2>测试2: RTSP流测试</h2>
      <VideoPlayer
        src="rtsp://223.113.67.182:554/openUrl/GANukmY"
        :width="640"
        :height="360"
        :autoplay="false"
        :muted="true"
        @ready="onPlayerReady"
        @error="onPlayerError"
        @rtsp-convert="onRTSPConvert"
      />
    </div>
    
    <div class="test-section">
      <h2>测试3: HLS流测试</h2>
      <VideoPlayer
        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        :width="640"
        :height="360"
        :autoplay="false"
        :muted="true"
        @ready="onPlayerReady"
        @error="onPlayerError"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'

const onPlayerReady = (player) => {
  console.log('播放器准备就绪:', player)
}

const onPlayerError = (error) => {
  console.error('播放器错误:', error)
}

const onRTSPConvert = (info) => {
  console.log('RTSP转换完成:', info)
}
</script>

<style scoped>
.video-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>